<template lang="pug">
  span(v-if="isDetailsPage || readonly")
    iframe(:src="src" frameborder="0" sandbox="allow-scripts" style="width:100%;min-height:99%")
    //<iframe src="data:text/html;charset=utf-8, frameborder="0" sandbox="allow-scripts"></iframe>
  .h-100(:id="myFormDesignWrapperId" style="min-height: 10px;" v-else )
    .myFormDesign(:id='myFormDesignId' name="content" style="width:calc(100% - 2px);")
</template>

<script>
  import _ from 'lodash'
  
  export default {
    name: 'j-rich-text-editor',
    props: ['config', 'value', 'readonly', 'isDetailsPage', 'size', 'form'],
    data() {
      return {
        myFormDesignId: _.uniqueId('myFormDesignId'),
        myFormDesignWrapperId: _.uniqueId('myFormDesignWrapperId')
      }
    },
    computed: {
      src() {
        if ((this.isDetailsPage || this.readonly) && this.value) {
          let value
          if (this.value.indexOf('<body>') > -1) {
            value = this.value.match(/<body>((.|\r|\n)*)<\/body>/)[1]
          } else {
            value = this.value
          }
          let html = `<html>
            <head>
            <link type="text/css" rel="stylesheet" href="${location.origin + process.env.VUE_APP_PUBLIC_PATH}venter/tinymce/skins/lightgray/content.min.css">
            </head>
            <body>
              ${value}
            </body>
          </html>`
          return `data:text/html;charset=utf-8,${encodeURIComponent(html)}`
        }
        return
      }
    },
    beforeDestroy() {
      this.formEditor && this.formEditor.destroy()
    },
    watch: {
      value() {
        if (!this.selfChangeFlag) {
          this.formEditor.setContent(this.value || '', { format: 'raw' })
        }
      }
    },
    mounted() {
      if (!this.isDetailsPage && !this.readonly) {
        tinymce.init({
          selector: `#${this.myFormDesignId}`,
          height: document.querySelector(`#${this.myFormDesignWrapperId}`).offsetHeight - 105,
          theme: 'modern',
          plugins: 'paste print preview fullpage searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount  imagetools  contextmenu colorpicker textpattern help code',
          toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor fontsizeselect | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat| code',
          image_advtab: true,
          fontsize_formats: '12px 13px 14px 15px 16px 17px 18px 20px 22px 24px 26px 30px 35px 40px 50px',
          skin: 'lightgray',
          paste_webkit_styles: true,
          content_css: [
            // '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
            // '//www.tinymce.com/css/codepen.min.css'
          ],
          contextmenu: `inserttable | cell row column deletetable`,
          init_instance_callback: (editor) => {
            this.formEditor = editor
            if (this.value) {
              editor.setContent(this.value, { format: 'raw' })
            }
            editor.on('change', () => {
              this.$emit('input', editor.getContent({ format: 'raw' }))
              this.selfChangeFlag = true
              setTimeout(() => {
                this.selfChangeFlag = false
              })
            })
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">

</style>
